<template>
  <view class="balance" v-if="myInfo.user_info && shenheStatus == 0">
    <singleHeader :pageTitle="getTitle[0]"></singleHeader>

    <view class="header module">
      <view class="headerTit">{{ getTitle[1] }}</view>
      <view class="headerNum">
        {{ type === "1" ? myInfo.user_info.money : myInfo.user_info.integral }}
      </view>
      

      <view class="headerBtn">
        <view
          v-if="type === '1' && myInfo.recharge_wallet_status"
          class="btn"
          @click="$utils.toUrl('/user/balance/recharge', 'navigate')"
        >
          <view class="on">{{ $t("person.pay") }}</view>
        </view>

        <view
          v-if="type === '2'"
          class="btn"
          @click="$utils.toUrl('/integral/integralStore/index', 'navigate')"
        >
          <view class="on">{{ `${stores.integral_name}商城` }}</view>
        </view>
      </view>
    </view>

    <div class="menu-list">
      <div @click="$utils.toUrl('/user/shop/cash?type='+ 'balance')" class="menu-item" v-if="myInfo.balanc_to_cash && type == 1">
        <div class="iconfont icon-wallet"></div>
        <div class="u-font-24">账户提现</div>
      </div>
      <div
        v-if="type === '1' && myInfo.balance_to_commission === 1"
        @click="$utils.toUrl('/user/balance/balance-bonus', 'navigate')"
        class="menu-item"
      >
        <div class="iconfont icon-CurrencyConverter"></div>
        <div class="u-font-24">{{ $t("user.balance") }}</div>
      </div>

      <div
        @click="$utils.toUrl('/recharge/list', 'navigate')"
        v-if="type === '1'"
        class="menu-item"
      >
        <div class="iconfont icon-jiaobiao"></div>
        <div class="u-font-24">充值记录</div>
      </div>
      <div
        @click="$utils.toUrl('/user/cash/cash?cash_type=7', 'navigate')"
        v-if="type === '1'"
        class="menu-item"
      >
        <div class="iconfont icon-jiehui"></div>
        <div class="u-font-24">提现列表</div>
      </div>

      <div
        @click="goList"
        v-if="type === '2'"
        class="menu-item"
      >
        <div class="iconfont icon-jiaobiao"></div>
        <div class="u-font-24">{{ $t("integral.viewDetails") }}</div>
      </div>
    </div>

    <view class="list module">
      <view class="listTitle">
        <view class="let">{{ getTitle[2] }}</view>

        <view class="arr" @click="goList">
          <view>查看全部</view>
          <i class="iconfont icon-arrow-right"></i>
        </view>
      </view>

      <view v-if="type === '1'">
        <view
          class="detailBox"
          v-for="(item, index) in detailList"
          :key="index"
        >
          <view class="detail">
            <view class="type">
              <text>{{ item.content }}</text>
              <text>{{ item.date }}</text>
            </view>
            <view class="count" :class="[getClass(item.log_type)]">{{
              item.price
            }}</view>
          </view>
        </view>
      </view>
      <view v-else>
        <view
          class="detailBox"
          v-for="(item, index) in detailList"
          :key="index"
        >
          <view class="detail">
            <view class="type">
              <text>{{ item.desc }}</text>
              <text>{{ item.created_at | date }}</text>
            </view>
            <view class="count" :class="[getClass(item.log_type)]"
              >{{ item.log_type == 1 ? "+" : "-" }}{{ item.amount }}</view
            >
          </view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import singleHeader from "@/components/diySystemPage/components/singleHeader/index.vue";

export default {
  components: {
    Shenhe,
    singleHeader,
  },

  data() {
    return {
      myInfo: {},
      isHidden: false,
      type: "1",
      detailList: [],
    };
  },

  filters: {
    date(e) {
      let date = new Date(e * 1000);
      let Y = date.getFullYear();
      let M = date.getMonth() + 1;
      let d = date.getDate();
      let h = date.getHours();
      let m = date.getMinutes();
      h = h >= 10 ? h : "0" + h;
      m = m >= 10 ? m : "0" + m;
      return Y + "-" + M + "-" + d + " " + h + ":" + m;
    },
  },

  computed: {
    getClass() {
      return (type) => {
        return type === "1" ? "on" : "";
      };
    },

    getTitle() {
      let { type } = this,
        list = [];
      if (type === "1") {
        list = [
          this.$t("person.myBalance"),
          this.$t("person.balance_1"),
          this.$t("user.detail"),
        ];
      } else {
        list = [
          `${this.stores.integral_name}`,
          `我的${this.stores.integral_name}`,
          `${this.stores.integral_name}明细`,
        ];
      }

      return list;
    },
  },

  onLoad(opi) {
    this.$utils.hideShareMenu();
    this.type = opi.type || "1";
  },

  onShow() {
    this.detailList = [];
    this.getMyinfo();
    this.getList();
  },

  methods: {
    // 获取详情列表
    async getList() {
      try {
        let { type } = this;

        if (type === "1") {
          const res = await this.$allrequest.user.recharge_list({
            page: 1,
            type: -1,
          });
          if (res.code != 0) throw res;
          this.detailList.push(...res.data.list);
        } else {
          this.$allrequest.integral
            .myIntegralList({
              type: 0,
            })
            .then((res) => {
              if (res.code == 0) {
                this.detailList = res.data;
              }
            });
        }
      } catch (e) {
        //TODO handle the exception
      }
    },

    goList() {
      let { type } = this;

      if (type === "1") {
        this.$utils.toUrl("/user/balance/balance-detail", "navigate");
      } else {
        this.$utils.toUrl("/integral/integral/myIntegralDetail", "navigate");
      }
    },

    async getMyinfo() {
      try {
        const res = await this.$allrequest.request.userindex({}, true);
        if (res.code != 0) throw res;
        this.myInfo = res.data;
      } catch (error) {
        this.$utils.toast(error.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.menu-list {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx 36rpx;
  margin-bottom: 24rpx;
  .menu-item {
    margin-right: 70rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    &:nth-last-child(1) {
      margin-right: 0;
    }
    .iconfont {
      font-size: 50rpx;
    }
  }
}
.balance {
  padding: 24rpx 24rpx calc(env(safe-area-inset-bottom) + 10rpx);
  min-height: 100vh;
  background: #f2f2f2;
}

.module {
  margin-bottom: 24rpx;
  border-radius: 20rpx;
  background: #fff;
}

.header {
  padding: 64rpx 20rpx 40rpx;
  text-align: center;
}

.headerTit {
  font-size: 24rpx;
  color: #262626;
}

.headerNum {
  padding: 10rpx 0;
  font-size: 84rpx;
  font-weight: bold;
}

.arr {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8c8c8c;

  .iconfont {
    font-size: 24rpx;
    color: #8c8c8c;
  }
}

.headerBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 72rpx;

  .btn {
    margin: 0 15rpx;
    flex: 1;
    overflow: hidden;

    view {
      background: #f4f4f4;
      height: 88rpx;
      line-height: 88rpx;
      overflow: hidden;
      color: #262626;
      border-radius: 32px;
      font-size: 32rpx;

      &.on {
        background: #f0250e;
        color: #fff;
      }
    }
  }
}

.listTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20rpx;

  .let {
    flex: 1;
    font-size: 34rpx;
    font-weight: bold;
    color: #262626;
  }
}

.list {
  padding: 24rpx;
}

.detailBox {
  width: 100%;
  background-color: #fff;
  .detail {
    padding: 24rpx 0;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .type {
      // width: 500rpx;
      // max-width: 500rpx;
      flex:1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      font-family: PingFang SC;
      font-size: 28rpx;
      color: #262626;
      text:nth-child(1) {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      text:nth-child(2) {
        font-size: 24rpx;
        color: #8c8c8c;
        margin-top: 4rpx;
      }
    }
    .count {
      margin-left: 20rpx;
      font-size: 36rpx;
      color: #262626;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &.on {
        color: #f84f11;
      }
    }
  }
}
.detailBox:last-child {
  .detail {
    border-bottom: none;
  }
}

.rechargeRecord {
  margin-top: 40rpx;
}
</style>
